<template>
  <div class="banner_form">
    <div class="flex flex-between-center header">
      <span v-if="type === 'bannerCol'" class="color-666">轮播图{{ itemIndex + 1 }}</span>
      <span v-else-if="type === 'categoryForm'" class="color-666">
        一级推荐商品
      </span>
      <span v-else v-show="type === 'capsuleBanner'?false:true" class="color-666">图片{{ itemIndex + 1 }}</span>
      <p v-if="showTool" class="tools">
        <span class="pointer" @click="$emit('upSortItem')"><i class="el-icon-top" /></span>
        <span class="pointer" @click="$emit('downSortItem')"><i class="el-icon-bottom" /></span>
        <span class="pointer" @click="$emit('deleteItem')"><i class="el-icon-delete" /></span>
      </p>
    </div>
    <crop-upload
      v-if="type === 'categoryForm'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="359px"
      wrapper-height="121px"
      :img-width="650"
      :min-height="220"
      :photo-width="359"
      :photo-height="121"
      @setVal="(val) => { formData.img = val }"
    />
    <crop-upload
      v-if="type === 'topBanner'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="359px"
      wrapper-height="248px"
      :img-width="750"
      :min-height="520"
      :photo-width="359"
      :photo-height="248"
      @setVal="(val) => { formData.img = val }"
    />
    <crop-upload
      v-if="type === 'capsuleBanner'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="359px"
      wrapper-height="88px"
      :img-width="690"
      :img-height="170"
      :photo-width="photoWidth"
      :photo-height="photoHeight"
      @setVal="(val) => { formData.img = val }"
    />
    <crop-upload
      v-if="type === 'capsuleBanner1'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="359px"
      wrapper-height="88px"
      :img-width="690"
      :img-height="170"
      :photo-width="359"
      :photo-height="88"
      @setVal="(val) => { formData.img = val }"
    />
    <crop-upload
      v-if="type === 'bannerCol'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="170px"
      wrapper-height="253px"
      :img-width="335"
      :img-height="500"
      :photo-width="170"
      :photo-height="253"
      @setVal="(val) => { formData.img = val }"
    />
    <crop-upload
      v-if="type === 'secBanner'"
      class="w-100 banner_img"
      show-type="photo"
      :init-val="formData.img"
      wrapper-width="359px"
      wrapper-height="88px"
      :img-width="690"
      :img-height="170"
      :photo-width="359"
      :photo-height="88"
      @setVal="(val) => { formData.img = val }"
    />
    <div v-if="formData.jumpType && formData.jumpUrl" class="flex align-center link_val">
      <span class="type">{{ formData.jumpType == 1 ? '文本链接' : '商品链接' }}</span>
      <el-tooltip v-if="type === 'bannerCol' || linkVal.length > 20" class="item" effect="dark" :content="linkVal" placement="top-start">
        <p class="flex-1 text-ellipsis">{{ linkVal }}</p>
      </el-tooltip>
      <p v-else class="flex-1 text-ellipsis">{{ linkVal }}</p>
      <span class="color-999 pointer" @click="deleteLink"><i class="el-icon-error" /></span>
    </div>
    <div v-else class="add-div" @click="addLink">
      <i class="el-icon-link" />添加链接
    </div>
    <link-dialog ref="linkDialog" @setVal="setVal" />
  </div>
</template>

<script>
import cropUpload from '@/components/cropUpload'
import linkDialog from './linkDialog'
export default {
  components: { cropUpload, linkDialog },
  props: {
    photoWidth: {
      type: String,
      default:''
    },
    photoHeight: {
      type: String,
      default: ''
    },
    itemIndex: {
      type: Number,
      default: 0
    },
    showTool: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    linkVal() {
      console.log(this.formData);
      return this.formData.jumpType === 1 ? this.formData.jumpUrl : this.formData.goods.title
    }
  },
  methods: {
    deleteLink() {
      this.formData.jumpUrl = ''
      this.formData.goods = {}
    },
    setVal({ jumpType, jumpUrl, goods }) {
      this.formData.jumpType = jumpType
      this.formData.jumpUrl = jumpUrl
      this.formData.goods = jumpType === 2 ? goods : {}
    },
    addLink() {
      this.$refs.linkDialog.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.tools {
  span {
    margin-left: 10px;
    color: #666666;
  }
}

.banner_img {
  margin: 10px 0 15px;
  text-align: center;
}

.link_val {
  height: 30px;
  padding: 8px;
  border: 1px solid #eeeeee;

  .type {
    padding-right: 8px;
    border-right: 1px solid #eeeeee;
  }

  p {
    padding: 0 8px;
  }
}
</style>
